<!-- <template>

    <div class="cruise animate__animated animate__pulse" ref="cruiseRef">
        <span>巡航设置</span>
        <i @click="close"></i>
        <div class="btn">
            <select id="select" @change="selectValue" v-model="select" ref="selectRef">
              
                <option value="0" v-if="!cruiseDatan">默认路线</option>
                <option :value="item.value" v-for="item in cruiseDatan" :key="item.id">{{ item.name }}</option>
            </select>
            <b @click="startRoute">{{ startRoutevalue }}</b>
            <b @click="suspend">{{ flightStart ? '暂停巡航' : '继续巡航' }}</b>
            <b @click="endRoute">结束飞行</b>
            <b @click="addRoute">添加航线</b>
        </div>
        <div class="myroute" v-if="tabRoute" style="height: 60%;">
            <p>我的路线</p>
            <ul>
                <li v-if="!cruiseDatan" style="margin-top: .125rem;">
                    默认路线
                </li>
              
                <li v-for="item in cruiseDatan" :key="item.id">
                    <span> {{ item.name }}</span>
                  
                    <button style="float: right;margin-right: .625rem;" v-if="item.id != 0"
                        @click="delRoute(item.id)">删除</button>
                </li>
            </ul>
        </div>
        <div class="getBtn" v-if="!tabRoute">
            <button @click="getView">获取视角</button>
            <button @click="addView">添加视角</button>
            <button @click="save">保存路线</button>
            <span class="tis">{{ tis }}</span>
        </div>
        <div class="inputBtn" v-if="!tabRoute">
            <div>
                <p>X:<input type="text" :value="store.getters['vRouteView/getList'].x" placeholder="X视角"></p>
                <p>Y:<input type="text" :value="store.getters['vRouteView/getList'].y" placeholder="Y视角"></p>
                <p>Z:<input type="text" :value="store.getters['vRouteView/getList'].z" placeholder="Z视角"></p>
            </div>
            <div>
                <p>P:<input type="text" :value="store.getters['vRouteView/getList'].pitch" placeholder="P视角"></p>
                <p>H:<input type="text" :value="store.getters['vRouteView/getList'].heading" placeholder="H视角"></p>
                <p>D:<input type="text" :value="duration" placeholder="D时间 (秒)"></p>
            </div>
        </div>

    </div>

</template> -->
<!-- <script lang="ts" setup>
import { ref, onMounted } from "vue"
import store from "../store/index"
const props = defineProps(["cruiseData"]);
// console.log(props);
let cruiseDatan = ref(eval("(" + localStorage.getItem("cruiseData") + ")"))

let duration = ref(6)
let tabRoute = ref(true)
let startRoutevalue = ref('开始飞行')
// let suspendRoutevalue = ref('暂停飞行')
let flightStart = ref(true)//1 暂停   2  继续
let tis = ref('')
let viewData = ref<any>([])//手动添加的飞行列表
const select = ref('0')
let selectRef = ref()
const emits = defineEmits(['cruiseView', 'getView', 'startFlight', 'endRoute', 'suspend', 'save', 'changeValue'])
// 下拉航线
let selectValue = (e: any) => {
    var value = selectRef.value.value;
    console.log(value, e.target);
    console.log(cruiseDatan.value);
    emits('changeValue', cruiseDatan.value[value].children)
}
let cruiseRef = ref()
// 关闭
const close = () => {
    // console.log(props, 8);
    emits('cruiseView', false)
    cruiseRef.value.className = "videoDiv animate__animated animate__zoomOut"
}
// 开始飞行
const startRoute = () => {
    emits('startFlight')
    // flightStart.value = 1
}
// 暂停飞行
const suspend = () => {
    if (sessionStorage.getItem("fId") == null) {
        alert('请先开始巡航')
        return
    }
    flightStart.value = !flightStart.value
    emits('suspend', flightStart.value)
}
// 结束
const endRoute = () => {
    emits('endRoute')
    startRoutevalue.value = "开始飞行"
}
// 添加航线
const addRoute = () => {
    tabRoute.value = !tabRoute.value
}
// 删除航线
const delRoute = (e: any) => {
    // alert(e)
    // console.log(cruiseDatan.value, e);
    if (confirm("你确定要删除吗？")) {
        cruiseDatan.value.splice(e, 1)
        let newData = cruiseDatan.value.filter((item: any) => {
            return item.id != e
        })
        console.log(JSON.stringify(newData));
        localStorage.setItem('cruiseData', JSON.stringify(newData))
        alert('删除成功')
    } else {
    }
}
//获取视角
const getView = () => {
    tis.value = ''
    emits('getView')
}
// 添加视角
const addView = () => {
    if (store.getters["vRouteView/getList"].pitch && store.getters["vRouteView/getList"].heading && store.getters["vRouteView/getList"].x && store.getters["vRouteView/getList"].y && store.getters["vRouteView/getList"].z) {
        tis.value = "添加成功"
        viewData.value.push({
            x: store.getters["vRouteView/getList"].x,
            y: store.getters["vRouteView/getList"].y,
            z: store.getters["vRouteView/getList"].z,
            heading: store.getters["vRouteView/getList"].heading,
            pitch: store.getters["vRouteView/getList"].pitch,
            duration: duration.value
        })
        // console.log(viewData.value, '手动添加的数据');
    } else {
        tis.value = "请填写必填参数"
    }
}

// 保存视角
const save = () => {
    let name = prompt("请输入飞行名称", "");
    if (name != null && name !== "") {
        tabRoute.value = true
        emits('save', viewData.value, name)
        alert('保存成功')
        viewData.value = []
        store.commit['vRouteView/DEL']
        // tabRoute.value = false
        // console.log(viewData.value);

    } else {
        alert('未添加名称,保存失败')
    }
}

onMounted(() => {
    
})

</script> -->
<!-- <style scoped>
::-webkit-scrollbar {
    display: none;
}

.inputBtn {
    padding-left: .125rem;
    font-size: .1875rem;
    color: #fff;
    display: flex;
}

.inputBtn p {
 
    width: 2rem;
    margin: .0625rem;
}

input {
    background: linear-gradient(to bottom, #f7f7f7, #ccc);
    border: none;
    border-radius: 5px;
    padding: 10px;
    width: 1.5rem;

    height: .125rem;
}

.myroute p {
    color: #fff;
    font-size: .2rem;
    padding-left: .125rem;
    padding-top: .125rem;
}

.myroute ul {
    overflow-y: scroll;
    height: 90%;
}

.myroute ul li {
    padding-left: .25rem;
    color: #4CAF50;
    font-size: .16rem;
  
    display: flex;
    justify-content: space-between;
}

.myroute ul li span {
    line-height: .4rem;
}

.myroute ul li span:hover {
    cursor: pointer;
}

.myroute ul li button {

    margin-top: .0625rem;
    background-color: #f66f6a;
    color: white;
    width: .625rem;
    height: .25rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.myroute ul li button:hover {
    background-color: #a54b4a;
}

.getBtn button {
    background-color: #12bae4;
    color: white;
    width: .875rem;
    height: .375rem;
    margin-left: .125rem;
    font-size: .175rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.getBtn button:hover {
    background-color: #73d5ee;
}

.getBtn .tis {
    color: #fff;
    padding-left: .0375rem;
}

.cruise {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/border_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.cruise>span {
    line-height: .4375rem;
    color: #fff;
    padding-left: .125rem;
    cursor: move;
}

.cruise i {
    position: absolute;
    cursor: pointer;
    top: .082rem;
    right: .1rem;
    width: .26rem;
    height: .26rem;
    background-image: url("../assets/img/close.png");
    background-repeat: no-repeat;
    background-size: .26rem .26rem;
    z-index: 1;
}

.cruise .line {
    color: #fff;
}

.cruise .btn b {
    cursor: pointer;
    display: inline-block;
    width: .75rem;
    height: .40rem;
    background-image: url("../assets/img/btn_1.png");
    background-repeat: no-repeat;
    background-size: .75rem .40rem;
    line-height: .4rem;
    margin: .125rem;
    text-align: center;
    color: #c5e942;
    font-size: .15rem;
}

.cruise .btn b:hover {
    background-image: url("../assets/img/btn_2.png");
}

#select {
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    font-size: .175rem;
    color: #333;
    border: 1px solid #ccc;
    border-radius: .0375rem;
    padding: .075rem;
    width: 1.25rem;
    min-width: 1rem;
    height: .375rem;
    margin-left: 0.125rem;
}

.date {
    display: inline-block;
    width: 180px;
    height: 30px;
    line-height: 50px;
    text-align: center;
    border: 2px solid #4CAF50;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    background-color: white;
    color: #4CAF50;
    font-size: 24px;
}

.time {
    display: inline-block;
    width: 110px;
    height: 30px;
    line-height: 50px;
    text-align: center;
    border: 2px solid #4CAF50;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    background-color: white;
    color: #4CAF50;
    font-size: 24px;
}
</style> -->
<!-- 上面的是之前本地存储的 -->
<template>
    <div class="cruise animate__animated animate__fadeInDown" ref="cruiseRef">
        <span>巡航设置</span>
        <i @click="close"></i>
        <div class="btn">
            <el-select v-model="value1" class="m-2 elselect1" placeholder="选择路线" @change="changeRoute()">
                <el-option key="1" label="默认路线" value="默认路线" />
                <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.menuid" />
            </el-select>
            <b @click="startRoute">{{ startRoutevalue }}</b>
            <b @click="suspend">{{ flightStart ? '暂停巡航' : '继续巡航' }}</b>
            <b @click="endRoute">结束飞行</b>
            <b @click="addRoute">添加航线</b>
            <b @click="node">节点编辑</b>
        </div>
        <div class="myroute" v-if="tabRoute" style="height: 60%;">
            <p>我的路线</p>
            <ul>
                <li v-if="options1" style="margin: .125rem 0 .125rem 0; ">
                    默认路线
                </li>
                <li v-for="item in options1" :key="item.id">
                    <span> {{ item.name }}</span>
                    <button style="float: right;margin-right: .625rem;" v-if="item.id != 0"
                        @click="delRoute(item.menuid)">删除</button>
                </li>
            </ul>
        </div>
        <!-- 添加航线的相关 -->
        <div class="getBtn" v-if="!tabRoute">
            <button v-if="tabNode" @click="getView">获取视角</button>
            <button v-if="tabNode" @click="addView">添加视角</button>
            <!-- <button v-if="tabNode" @click="save">保存路线</button> -->
            <!-- <button @click="node">{{ tabNode ? '删除节点' : '添加航线' }}</button> -->
            <span v-if="tabNode" class="tis">{{ tis }}</span>
        </div>
        <div class="inputBtn" v-if="!tabRoute">
            <div v-if="tabNode">
                <p>X:<input type="text" :value="store.getters['vRouteView/getList'].x" placeholder="X视角"></p>
                <p>Y:<input type="text" :value="store.getters['vRouteView/getList'].y" placeholder="Y视角"></p>
                <p>Z:<input type="text" :value="store.getters['vRouteView/getList'].z" placeholder="Z视角"></p>
            </div>
            <div v-if="tabNode">
                <p>P:<input type="text" :value="store.getters['vRouteView/getList'].pitch" placeholder="P视角"></p>
                <p>H:<input type="text" :value="store.getters['vRouteView/getList'].heading" placeholder="H视角"></p>
                <p>D:<input type="text" :value="duration" placeholder="D时间 (秒)"></p>
            </div>
        </div>
        <div class="tabNodelist" v-if="!tabNode">
            <p>节点</p>
            <button style="float: left;margin: .125rem;background-color: green;" @click="addRoute1()">新增</button>
            <ul style="margin-top: .5rem;height: .95rem;">
                <!-- <template v-for="(item, index) in options1"> -->
                <li v-for="(item1, index1) in options2" :key="item1.id">
                    <span> {{ item1.menuid }}</span>
                    <button style="float: right;margin-right: .625rem;" @click="delRoute1(item1.menuid)">删除</button>
                </li>
                <!-- </template> -->
            </ul>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue"
import store from "../store/index"
import { ElMessage, ElMessageBox } from 'element-plus'
import http from 'axios'
const props = defineProps(["cruiseData"]);

// console.log(props);
// let cruiseDatan = ref(eval("(" + localStorage.getItem("cruiseData") + ")"))//自定义的路线数据
let duration = ref(6)
let tabRoute = ref(true)//添加航线显示
let tabNode = ref(true)//删除节点显示
let startRoutevalue = ref('开始飞行')//默认显示
let flightStart = ref(true)//1 暂停   2  继续
const value1 = ref('')//下拉选择项1
// const value2 = ref('')//下拉选择项2
const selectTag = ref(false)//判断是否选中航线
let tis = ref('')//小提示
// 全部路线
let options1 = ref([

])
// 单个路线的子节点数据
let options2 = ref([

])

// 路线下拉框触发
const changeRoute = () => {
    console.log(value1.value);
    // console.log(selectTag.value);
    selectTag.value = true//确定是已经选择了路线
    tabRoute.value = true//隐藏添加航线
    tabNode.value = true//隐藏添加节点
    console.log(options1.value);
    if (value1.value == '默认路线') {
        return false
    }
    let datalist = options1.value.filter((item, index) => {
        return item.menuid == value1.value
    })
    options2.value = datalist[0].children
    // console.log(datalist[0].children);
    // console.log(options2.value);

}
// let viewData = ref<any>([])//手动添加的飞行列表
// const select = ref('0')
// let selectRef = ref()
const emits = defineEmits(['cruiseView', 'getView', 'startFlight', 'endRoute', 'suspend', 'save', 'changeValue'])
// 下拉航线
// let selectValue = (e: any) => {
//     var value = selectRef.value.value;
//     console.log(value, e.target);
//     console.log(cruiseDatan.value);
//     emits('changeValue', cruiseDatan.value[value].children)
// }
let cruiseRef = ref()
// 关闭
const close = () => {
    // console.log(props, 8);
    emits('cruiseView', false)
    cruiseRef.value.className = "videoDiv animate__animated animate__zoomOut"
}
// 开始飞行
const startRoute = () => {
    if (!selectTag.value) {
        ElMessage({
            message: '请选择路线',
            type: 'warning',
        })
        return false
    }
    if (value1.value == '默认路线') {
        emits('changeValue', 'mr')//替换默认
        emits('startFlight', '默认路线')

        return
    }
    // emits('startFlight')

    let newData = options2.value.map((item) => {
        return {
            x: Number(item.x),
            y: Number(item.y),
            z: Number(item.z),
            heading: Number(item.heading),
            pitch: Number(item.pitch),
            duration: Number(item.duration)
        }
    })
    emits('changeValue', newData)
    setTimeout(() => {
        emits('startFlight')
    }, 200)
    // console.log(newData);
    // flightStart.value = 1
}
// 暂停飞行
const suspend = () => {
    if (sessionStorage.getItem("fId") == null) {
        alert('请先开始巡航')
        return
    }
    flightStart.value = !flightStart.value
    emits('suspend', flightStart.value)
}
// 结束
const endRoute = () => {
    emits('endRoute')
    startRoutevalue.value = "开始飞行"
}
// 添加航线
const addRoute = () => {
    let name = prompt("请输入路线名称", "");
    if (name != null && name !== "") {
        // tabRoute.value = true
        // emits('save', viewData.value, name)
        http({
            method: "post",
            url: `/sinlogin/xunManage/addfutype/?name=${name}`,
            // data: {
            //     menuid:e
            // },
            baseURL: "/abs",
        })
            .then((response) => {
                // console.log("成功", response)
                ElMessage({
                    message: '保存成功',
                    type: 'success',
                })
                getData()
                // if (response.status == 200) {
                //     ElMessage({
                //         message: 'ok',
                //         type: 'success',
                //     })
                //     options1.value = response.data
                // } else {
                //     ElMessage({
                //         message: '无数据或服务器错误',
                //         type: 'warning',
                //     })
                // }
            })
            .catch((error) => {
                // console.log("失败", error);
                ElMessage({
                    message: '服务器错误',
                    type: 'warning',
                })
            });


        // viewData.value = []
        // store.commit['vRouteView/DEL']
        // tabRoute.value = false
        // console.log(viewData.value);
        tabRoute.value = !tabRoute.value
    } else {
        alert('保存失败')
        tabRoute.value = true
    }
}
// 删除航线
const delRoute = (e: any) => {
    ElMessageBox.confirm(
        '确定要删除该航线吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 掉接口刷新数据
            http({
                method: "post",
                url: `/sinlogin/xunManage/delmenuid/?menuid=${e}`,
                // data: {
                //     menuid:e
                // },
                baseURL: "/abs",
            })
                .then((response) => {
                    // console.log("成功", response)
                    getData()
                    // if (response.status == 200) {
                    //     ElMessage({
                    //         message: 'ok',
                    //         type: 'success',
                    //     })
                    //     options1.value = response.data
                    // } else {
                    //     ElMessage({
                    //         message: '无数据或服务器错误',
                    //         type: 'warning',
                    //     })
                    // }
                })
                .catch((error) => {
                    // console.log("失败", error);
                    ElMessage({
                        message: '服务器错误',
                        type: 'warning',
                    })
                });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
// 节点删除
const delRoute1 = (e: any) => {
    ElMessageBox.confirm(
        '确定要删除该节点吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 掉接口刷新数据
            http({
                method: "post",
                url: `/sinlogin/xunManage/delmenuid/?menuid=${e}`,
                // data: {
                //     menuid:e
                // },
                baseURL: "/abs",
            })
                .then((response) => {
                    // console.log("成功", response)
                    getData()
                    // if (response.status == 200) {
                    //     ElMessage({
                    //         message: 'ok',
                    //         type: 'success',
                    //     })
                    //     options1.value = response.data
                    // } else {
                    //     ElMessage({
                    //         message: '无数据或服务器错误',
                    //         type: 'warning',
                    //     })
                    // }
                })
                .catch((error) => {
                    // console.log("失败", error);
                    ElMessage({
                        message: '服务器错误',
                        type: 'warning',
                    })
                });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
//获取视角
const getView = () => {
    tis.value = ''
    emits('getView')
}
// 添加视角
const addView = () => {
    if (store.getters["vRouteView/getList"].pitch && store.getters["vRouteView/getList"].heading && store.getters["vRouteView/getList"].x && store.getters["vRouteView/getList"].y && store.getters["vRouteView/getList"].z) {
        tis.value = "添加成功"
        // viewData.value.push({
        //     x: store.getters["vRouteView/getList"].x,
        //     y: store.getters["vRouteView/getList"].y,
        //     z: store.getters["vRouteView/getList"].z,
        //     heading: store.getters["vRouteView/getList"].heading,
        //     pitch: store.getters["vRouteView/getList"].pitch,
        //     duration: duration.value
        // })
        // console.log(viewData.value, '手动添加的数据');
        http({
            method: "post",
            url: `/sinlogin/xunManage/addzitype/?menuid=${value1.value}&x=${store.getters["vRouteView/getList"].x}&y=${store.getters["vRouteView/getList"].y}&z=${store.getters["vRouteView/getList"].z}&pitch=${store.getters["vRouteView/getList"].pitch}&heading=${store.getters["vRouteView/getList"].heading}&duration=${duration.value}`,
            // data: {
            //     menuid:e
            // },
            baseURL: "/abs",
        })
            .then((response) => {
                // console.log("成功", response)
                getData()
                // if (response.status == 200) {
                //     ElMessage({
                //         message: 'ok',
                //         type: 'success',
                //     })
                //     options1.value = response.data
                // } else {
                //     ElMessage({
                //         message: '无数据或服务器错误',
                //         type: 'warning',
                //     })
                // }
            })
            .catch((error) => {
                // console.log("失败", error);
                ElMessage({
                    message: '服务器错误',
                    type: 'warning',
                })
            });
    } else {
        tis.value = "请填写必填参数"
    }
}

// 保存视角
// const save = () => {
//     let name = prompt("请输入飞行名称", "");
//     if (name != null && name !== "") {
//         tabRoute.value = true
//         emits('save', viewData.value, name)
//         alert('保存成功')
//         viewData.value = []
//         store.commit['vRouteView/DEL']
//         // tabRoute.value = false
//         // console.log(viewData.value);

//     } else {
//         alert('未添加名称,保存失败')
//     }
// }
// 编辑节点
const node = () => {
    if (!selectTag.value) {
        ElMessage({
            message: '请选择路线',
            type: 'warning',
        })
        return false
    }
    if (value1.value == '默认路线') {
        ElMessage({
            message: '默认路线不可操作',
            type: 'warning',
        })
        return false
    }
    tabRoute.value = !tabNode.value
    tabNode.value = !tabNode.value
}
// 获取巡航数据
const getData = () => {
    http({
        method: "post",
        url: `/sinlogin/xunManage/findAll`,
        data: {},
        baseURL: "/abs",
    })
        .then((response) => {
            console.log("成功", response.data)
            if (response.status == 200) {
                ElMessage({
                    message: 'ok',
                    type: 'success',
                })
                options1.value = response.data
            } else {
                ElMessage({
                    message: '无数据或服务器错误',
                    type: 'warning',
                })
            }
        })
        .catch((error) => {
            // console.log("失败", error);
            ElMessage({
                message: '服务器错误',
                type: 'warning',
            })
        });
}
// 新增节点
const addRoute1 = () => {
    tabNode.value = !tabNode.value//
}
onMounted(() => {
    getData()
})
</script>
<style scoped>
::-webkit-scrollbar {
    display: none;
}


.cruise {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/border_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.cruise>span {
    line-height: .4375rem;
    color: #fff;
    padding-left: .125rem;
    cursor: move;
}

.cruise i {
    position: absolute;
    cursor: pointer;
    top: .082rem;
    right: .1rem;
    width: .26rem;
    height: .26rem;
    background-image: url("../assets/img/close.png");
    background-repeat: no-repeat;
    background-size: .26rem .26rem;
    z-index: 1;
}

.cruise .line {
    color: #fff;
}

.cruise .btn b {
    cursor: pointer;
    display: inline-block;
    width: .75rem;
    height: .40rem;
    background-image: url("../assets/img/btn_1.png");
    background-repeat: no-repeat;
    background-size: .75rem .40rem;
    line-height: .4rem;
    margin: .125rem;
    text-align: center;
    color: #c5e942;
    font-size: .15rem;
}

.cruise .btn b:nth-child(5) {
    /* margin-left: 1.75rem; */
}

.cruise .btn b:hover {
    background-image: url("../assets/img/btn_2.png");
}

.cruise .elselect1 {
    margin-left: .125rem;
    width: 1.5rem;
}

.cruise .elselect2 {
    margin-top: .125rem;
    width: 1.5rem;
}

.myroute p {
    color: #fff;
    font-size: .2rem;
    padding-left: .125rem;
    padding-top: .125rem;
}

.myroute ul {
    overflow-y: scroll;
    height: 90%;
}

.myroute ul li {
    padding-left: .25rem;
    color: #4CAF50;
    font-size: .16rem;

    display: flex;
    justify-content: space-between;
}

.myroute ul li span {
    line-height: .4rem;
}

.myroute ul li span:hover {
    cursor: pointer;
}

.myroute ul li button {

    margin-top: .0625rem;
    background-color: #f66f6a;
    color: white;
    width: .625rem;
    height: .25rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.myroute ul li button:hover {
    background-color: #a54b4a;
}

.getBtn {}

.getBtn button {
    background-color: #12bae4;
    color: white;
    width: .875rem;
    height: .375rem;
    margin-left: .125rem;
    font-size: .175rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.getBtn button:hover {
    background-color: #73d5ee;
}

.getBtn .tis {
    color: #fff;
    padding-left: .0375rem;
}

.inputBtn {
    padding-left: .125rem;
    font-size: .1875rem;
    color: #fff;
    display: flex;
}

.inputBtn p {
    width: 2rem;
    margin: .0625rem;
}

input {
    background: linear-gradient(to bottom, #f7f7f7, #ccc);
    border: none;
    border-radius: 5px;
    padding: 10px;
    width: 1.5rem;
    height: .125rem;
}

.getBtn button {
    background-color: #12bae4;
    color: white;
    width: .875rem;
    height: .375rem;
    margin-left: .125rem;
    font-size: .175rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.getBtn button:hover {
    background-color: #73d5ee;
}

.getBtn .tis {
    color: #fff;
    padding-left: .0375rem;
}

.tabNodelist {
    width: 100%;
}

.tabNodelist button {
    background-color: #e41212;
    color: white;
    width: .875rem;
    height: .375rem;
    margin-left: .125rem;
    font-size: .175rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.tabNodelist p {
    color: #fff;
    font-size: .2rem;
    padding-left: .125rem;
    padding-top: .125rem;
}

.tabNodelist ul {
    overflow-y: scroll;
    height: 2rem;
}

.tabNodelist ul li {
    padding-left: .25rem;
    color: #4CAF50;
    font-size: .16rem;

    display: flex;
    justify-content: space-between;
}

.tabNodelist ul li span {
    line-height: .4rem;
}

.tabNodelist ul li span:hover {
    cursor: pointer;
}

.tabNodelist ul li button {

    margin-top: .0625rem;
    background-color: #f66f6a;
    color: white;
    width: .625rem;
    height: .25rem;
    border: 0;
    font-size: .175rem;
    box-sizing: content-box;
    border-radius: 5px;
    cursor: pointer;
}

.tabNodelist ul li button:hover {
    background-color: #a54b4a;
}
</style>